<template>
  <div class="smsBase-wrap">
    <el-divider content-position="left">短信模式</el-divider>
    <el-form ref="form" :model="form" label-width="100px">
      <div class="el-form-item__content100">
        <el-form-item style="width: 40%;" label="开启邮件功能">
          <el-switch v-model="form.open"></el-switch>
        </el-form-item>
      </div>
    </el-form>
    <el-radio-group v-model="form.mode" size="mini">
      <el-radio-button label="阿里云"></el-radio-button>
      <el-radio-button label="阿里云Rest"></el-radio-button>
      <el-radio-button label="腾讯云 SMS"></el-radio-button>
      <el-radio-button label="网易云信"></el-radio-button>
      <el-radio-button label="华为云 SMS"></el-radio-button>
      <el-radio-button label="SendCloud"></el-radio-button>
      <el-radio-button label="百度云"></el-radio-button>
      <el-radio-button label="华信短信平台"></el-radio-button>
      <el-radio-button label="融云"></el-radio-button>
      <el-radio-button label="聚合数据"></el-radio-button>
    </el-radio-group>
    <el-radio-group v-model="form.mode" size="mini">
      <el-radio-button label="容联云通讯"></el-radio-button>
      <el-radio-button label="互亿无线"></el-radio-button>
      <el-radio-button label="云片"></el-radio-button>
      <el-radio-button label="螺丝帽"></el-radio-button>
      <el-radio-button label="天毅无线"></el-radio-button>
      <el-radio-button label="twilio"></el-radio-button>
      <el-radio-button label="Submail"></el-radio-button>
      <el-radio-button label="253云通讯（创蓝)"></el-radio-button>
      <el-radio-button label="阿凡达数据"></el-radio-button>
    </el-radio-group>
    <div>
        <el-divider content-position="left">短信配置</el-divider>
    </div>
    <el-tabs v-model="activeName" @tab-click="smsTabIndex">
      <el-tab-pane  label="阿里云" name="aliyun">
    <el-link style="margin:  20px 0" type="primary" @click="getlink" >{{ linkText }}</el-link>
        <el-form ref="form" :model="smsForm" label-width="130px">
          <el-form-item style="width: 40%;" label="access_key_id">
            <el-input v-model="smsForm.aliyun.access_key_id"></el-input>
          </el-form-item>
          <el-form-item style="width: 40%;"  label="access_key_secret">
            <el-input v-model="smsForm.aliyun.access_key_secret"></el-input>
          </el-form-item>
          <el-form-item style="width: 40%;" label="sign_name">
            <el-input v-model="smsForm.aliyun.sign_name"></el-input>
          </el-form-item>
        </el-form>

      </el-tab-pane>
      <el-tab-pane label="阿里云Rest" name="aliyunrest">
          <el-link style="margin:  20px 0" type="primary" @click="getlink" >{{ linkText }}</el-link>
        <el-form ref="form" :model="smsForm" label-width="130px">
          <el-form-item style="width: 40%;" label="app_key">
            <el-input v-model="smsForm.aliyunrest.app_key"></el-input>
          </el-form-item>
          <el-form-item style="width: 40%;" label="app_secret_key">
            <el-input v-model="smsForm.aliyunrest.app_secret_key"></el-input>
          </el-form-item>
          <el-form-item style="width: 40%;" label="sign_name">
            <el-input v-model="smsForm.aliyunrest.sign_name"></el-input>
          </el-form-item>
        </el-form>

      </el-tab-pane>
      
      <el-tab-pane label="云片" name="yunpian">
          <el-link style="margin:  20px 0" type="primary" @click="getlink" >{{ linkText }}</el-link>
        <el-form ref="form" :model="smsForm" label-width="130px">
          <el-form-item style="width: 40%;" label="access_key_id">
            <el-input v-model="smsForm.yunpian.access_key_id"></el-input>
          </el-form-item>
          <el-form-item style="width: 40%;" label="access_key_secret">
            <el-input v-model="smsForm.yunpian.access_key_secret"></el-input>
          </el-form-item>
          <el-form-item style="width: 40%;" label="sign_name">
            <el-input v-model="smsForm.yunpian.sign_name"></el-input>
          </el-form-item>
        </el-form>

      </el-tab-pane>
      <el-tab-pane label="Submail" name="submail">
          <el-link style="margin:  20px 0" type="primary" @click="getlink" >{{ linkText }}</el-link>
        <el-form ref="form" :model="smsForm" label-width="130px">
          <el-form-item style="width: 40%;" label="app_id">
            <el-input v-model="smsForm.submail.app_id"></el-input>
          </el-form-item>
          <el-form-item style="width: 40%;" label="app_key">
            <el-input v-model="smsForm.submail.app_key"></el-input>
          </el-form-item>
          <el-form-item style="width: 40%;" label="project">
            <el-input v-model="smsForm.submail.project"></el-input>
          </el-form-item>
        </el-form>

      </el-tab-pane>
      <el-tab-pane label="螺丝帽" name="luosimao">
          <el-link style="margin:  20px 0" type="primary" @click="getlink" >{{ linkText }}</el-link>
          <el-form ref="form" :model="smsForm" label-width="130px">
          <el-form-item style="width: 40%;" label="api_key">
            <el-input v-model="smsForm.luosimao.api_key"></el-input>
          </el-form-item>
        </el-form>

      </el-tab-pane>
      <el-tab-pane label="容联云通讯" name="yuntongxun">
          <el-link style="margin:  20px 0" type="primary" @click="getlink" >{{ linkText }}</el-link>
        <el-form ref="form" :model="smsForm" label-width="130px">
          <el-form-item style="width: 40%;" label="app_id">
            <el-input v-model="smsForm.yuntongxun.app_id"></el-input>
          </el-form-item>
          <el-form-item style="width: 40%;" label="account_sid">
            <el-input v-model="smsForm.yuntongxun.account_sid"></el-input>
          </el-form-item>
          <el-form-item style="width: 40%;" label="account_token">
            <el-input v-model="smsForm.yuntongxun.account_token"></el-input>
          </el-form-item>
          <el-form-item style="width: 40%;" label="is_sub_account">
            <el-input v-model="smsForm.yuntongxun.is_sub_account"></el-input>
          </el-form-item>
        </el-form>

      </el-tab-pane>
      <el-tab-pane label="互亿无线" name="huyi">
          <el-link style="margin:  20px 0" type="primary" @click="getlink" >{{ linkText }}</el-link>
        <el-form ref="form" :model="smsForm" label-width="130px">
          <el-form-item style="width: 40%;" label="api_id">
            <el-input v-model="smsForm.huyi.api_id"></el-input>
          </el-form-item>
          <el-form-item style="width: 40%;" label="api_key">
            <el-input v-model="smsForm.huyi.api_key"></el-input>
          </el-form-item>
          <el-form-item style="width: 40%;" label="signature">
            <el-input v-model="smsForm.huyi.signature"></el-input>
          </el-form-item>
        </el-form>

      </el-tab-pane>
      <el-tab-pane label="聚合数据" name="juhe">
          <el-link style="margin:  20px 0" type="primary" @click="getlink" >{{ linkText }}</el-link>
        <el-form ref="form" :model="smsForm" label-width="130px">
          <el-form-item style="width: 40%;" label="app_key">
            <el-input v-model="smsForm.juhe.app_key"></el-input>
          </el-form-item>
        </el-form>

      </el-tab-pane>
      <el-tab-pane label="SendCloud" name="sendcloud">
          <el-link style="margin:  20px 0" type="primary" @click="getlink" >{{ linkText }}</el-link>
        <el-form ref="form" :model="smsForm" label-width="100px">
          <el-form-item style="width: 40%;" label="app_key">
            <el-input v-model="smsForm.sendcloud.app_key"></el-input>
          </el-form-item>
          <el-form-item style="width: 40%;" label="sms_key">
            <el-input v-model="smsForm.sendcloud.sms_key"></el-input>
          </el-form-item>
          <el-form-item label="是否启用时间戳">
            <el-switch v-model="form.timestamp"></el-switch>
          </el-form-item>
        </el-form>

      </el-tab-pane>
      <el-tab-pane label="百度云" name="baidu">
          <el-link style="margin:  20px 0" type="primary" @click="getlink" >{{ linkText }}</el-link>
        <el-form ref="form" :model="smsForm" label-width="130px">
          <el-form-item style="width: 40%;" label="app_key">
            <el-input v-model="smsForm.baidu.app_key"></el-input>
          </el-form-item>
          <el-form-item style="width: 40%;" label="sms_key">
            <el-input v-model="smsForm.baidu.sms_key"></el-input>
          </el-form-item>
          <el-form-item style="width: 40%;" label="invoke_id">
            <el-input v-model="smsForm.baidu.invoke_id"></el-input>
          </el-form-item>
          <el-form-item style="width: 40%;" label="domain">
            <el-input v-model="smsForm.baidu.domain"></el-input>
          </el-form-item>
        </el-form>


      </el-tab-pane>

      <el-tab-pane label="华信短信平台" name="huaxin">
        <el-link style="margin:  20px 0" type="primary" @click="getlink" >{{ linkText }}</el-link>
        <el-form ref="form" :model="smsForm" label-width="130px">
          <el-form-item style="width: 40%;" label="app_key">
            <el-input v-model="smsForm.huaxin.app_key"></el-input>
          </el-form-item>
          <el-form-item style="width: 40%;" label="sms_key">
            <el-input v-model="smsForm.huaxin.sms_key"></el-input>
          </el-form-item>
          <el-form-item style="width: 40%;" label="invoke_id">
            <el-input v-model="smsForm.huaxin.invoke_id"></el-input>
          </el-form-item>
          <el-form-item style="width: 40%;" label="domain">
            <el-input v-model="smsForm.huaxin.domain"></el-input>
          </el-form-item>
        </el-form>

      </el-tab-pane>
      <el-tab-pane label="253云通讯(创蓝)" name="chuanglan">
        <el-link style="margin:  20px 0" type="primary" @click="getlink" >{{ linkText }}</el-link>
        <el-form ref="form" :model="smsForm" label-width="130px">
          <el-form-item style="width: 40%;" label="account">
            <el-input v-model="smsForm.chuanglan.account"></el-input>
          </el-form-item>
          <el-form-item style="width: 40%;" label="password">
            <el-input v-model="smsForm.chuanglan.password"></el-input>
          </el-form-item>
          
          <el-form-item label="通道">
            <el-select v-model="smsForm.chuanglan.channel" placeholder="请选择通道">
              <el-option label="验证码通道（默认）" value="\Overtrue\EasySms\Gateways\ChuanglanGateway::CHANNEL_VALIDATE_CODE"></el-option>
              <el-option label="会员营销通道" value="\Overtrue\EasySms\Gateways\ChuanglanGateway::CHANNEL_PROMOTION_CODE"></el-option>
            </el-select>
          </el-form-item>
          
          <el-form-item style="width: 40%;" label="sign(签名)">
            <el-input v-model="smsForm.chuanglan.sign"></el-input>
          </el-form-item>
          <el-form-item style="width: 40%;" label="unsubscribe">
            <el-input v-model="smsForm.chuanglan.unsubscribe"></el-input>
          </el-form-item>
        </el-form>

      </el-tab-pane>
      <el-tab-pane label="融云" name="rongcloud">
          <el-link style="margin:  20px 0" type="primary" @click="getlink" >{{ linkText }}</el-link>
        <el-form ref="form" :model="smsForm" label-width="130px">
          <el-form-item style="width: 40%;" label="app_key">
            <el-input v-model="smsForm.rongcloud.app_key"></el-input>
          </el-form-item>
          <el-form-item style="width: 40%;" label="app_secret">
            <el-input v-model="smsForm.rongcloud.app_secret"></el-input>
          </el-form-item>
        </el-form>

      </el-tab-pane>
      <el-tab-pane label="天毅无线" name="tianyiwuxian">
          <el-link style="margin:  20px 0" type="primary" @click="getlink" >{{ linkText }}</el-link>
        <el-form ref="form" :model="smsForm" label-width="130px">
          <el-form-item style="width: 40%;" label="username">
            <el-input v-model="smsForm.tianyiwuxian.username"></el-input>
          </el-form-item>
          <el-form-item style="width: 40%;" label="password">
            <el-input v-model="smsForm.tianyiwuxian.password"></el-input>
          </el-form-item>
          <el-form-item style="width: 40%;" label="gwid">
            <el-input v-model="smsForm.tianyiwuxian.gwid"></el-input>
          </el-form-item>
        </el-form>

      </el-tab-pane>
      <el-tab-pane label="twilio" name="twilio">
          <el-link style="margin:  20px 0" type="primary" @click="getlink" >{{ linkText }}</el-link>
        <el-form ref="form" :model="smsForm" label-width="130px">
          <el-form-item style="width: 40%;" label="username">
            <el-input v-model="smsForm.twilio.account_sid"></el-input>
          </el-form-item>
          <el-form-item style="width: 40%;" label="password">
            <el-input v-model="smsForm.twilio.from"></el-input>
          </el-form-item>
          <el-form-item style="width: 40%;" label="gwid">
            <el-input v-model="smsForm.twilio.token"></el-input>
          </el-form-item>
        </el-form>

      </el-tab-pane>
      <el-tab-pane label="腾讯云 SMS" name="qcloud">
          <el-link style="margin:  20px 0" type="primary" @click="getlink" >{{ linkText }}</el-link>
        <el-form ref="form" :model="smsForm" label-width="130px">
          <el-form-item style="width: 40%;" label="sdk_app_id">
            <el-input v-model="smsForm.qcloud.sdk_app_id"></el-input>
          </el-form-item>
          <el-form-item style="width: 40%;" label="password">
            <el-input v-model="smsForm.qcloud.app_key"></el-input>
          </el-form-item>
          <el-form-item style="width: 40%;" label="gwid">
            <el-input v-model="smsForm.qcloud.sign_name"></el-input>
          </el-form-item>
        </el-form>
          
      </el-tab-pane>
      <el-tab-pane label="阿凡达数据" name="avatardata">
          <el-link style="margin:  20px 0" type="primary" @click="getlink" >{{ linkText }}</el-link>
        <el-form ref="form" :model="smsForm" label-width="130px">
          <el-form-item style="width: 40%;" label="app_key">
            <el-input v-model="smsForm.avatardata.app_key"></el-input>
          </el-form-item>
         
        </el-form>
          

      </el-tab-pane>
      <el-tab-pane label="华为云 SMS" name="huawei">
      <el-link style="margin:  20px 0" type="primary" @click="getlink" >{{ linkText }}</el-link>
        <el-form ref="form" :model="smsForm" label-width="130px">
          <el-form-item style="width: 40%;" label="endpoint">
            <el-input v-model="smsForm.huawei.endpoint"></el-input>
          </el-form-item>
          <el-form-item style="width: 40%;" label="app_key">
            <el-input v-model="smsForm.huawei.app_key"></el-input>
          </el-form-item>
          <el-form-item style="width: 40%;" label="app_secret">
            <el-input v-model="smsForm.huawei.app_secret"></el-input>
          </el-form-item>
          <el-form-item style="width: 40%;" label="from_default (id)">
            <el-input v-model="smsForm.huawei.from_default"></el-input>
          </el-form-item>
          <el-form-item style="width: 40%;" label="callback">
            <el-input v-model="smsForm.huawei.callback"></el-input>
          </el-form-item>
         
        </el-form>


      </el-tab-pane>
      <el-tab-pane label="网易云信" name="yunxin">
      <el-link style="margin:  20px 0" type="primary" @click="getlink" >{{ linkText }}</el-link>
        <el-form ref="form" :model="smsForm" label-width="130px">
          <el-form-item style="width: 40%;" label="app_key">
            <el-input v-model="smsForm.yunxin.app_key"></el-input>
          </el-form-item>
          <el-form-item style="width: 40%;" label="app_secret">
            <el-input v-model="smsForm.yunxin.app_secret"></el-input>
          </el-form-item>
          <el-form-item style="width: 40%;" label="code_length">
            <el-input v-model="smsForm.yunxin.code_length"></el-input>
          </el-form-item>
          <el-form-item label="是否需要上行">
            <el-switch v-model="smsForm.yunxin.need_up"></el-switch>
          </el-form-item>
        </el-form>

      </el-tab-pane>
    </el-tabs>
      <el-button type="primary" @click="all_Submit">全部保存</el-button>
  </div>
</template>

<script>
import { mkdir } from 'fs';
export default {
  name: "SmsBase",
  data() {
    return {
      activeName: "aliyun",
      dialogVisible: false,
      index: 0,
      linkText:"阿里云 申请地址",
      link:[
          "https://www.aliyun.com/",
          "https://www.aliyun.com/",
          "https://www.yunpian.com",
          "https://www.mysubmail.com",
          "https://luosimao.com/",
          "http://www.yuntongxun.com",
          "http://www.ihuyi.com",
          "https://www.juhe.cn",
          "http://www.sendcloud.net/",
          "https://cloud.baidu.com/",
          "http://www.ipyy.com/",
          "https://www.253.com/",
          "http://www.rongcloud.cn",
          "http://www.85hu.com/",
          "https://www.twilio.com/",
          "https://cloud.tencent.com/product/sms",
          "http://www.avatardata.cn/",
          "https://www.huaweicloud.com/product/msgsms.html",
          "https://yunxin.163.com/sms"
      ],
      smsForm:{
          aliyun:{
              access_key_id:'',
              access_key_secret:'',
              sign_name:''
          },
          aliyunrest:{
              app_key:'',
              app_secret_key:'',
              sign_name:''
          },
          yunpian:{
              api_key:'',
              signature:'',
          },
          submail:{
              app_id:'',
              app_key:'',
              project:'',
          },
          luosimao:{
              api_key:''
          },
          yuntongxun:{
              app_id:'',
              account_sid:'',
              account_token:'',
              is_sub_account:'',
          },
          huyi:{
              api_id:'',
              api_key:'',
              signature:'',
          },
          juhe:{
              app_key:''
          },
          sendcloud:{
              sms_user:'',
              sms_key:'',
              timestamp: false,
          },
          baidu:{
              ak:'',
              sk:'',
              invoke_id:'',
              domain:'',
          },
          huaxin:{
              user_id:'',
              password:'',
              account:'',
              ip:'',
              ext_no:'',
          },
          chuanglan:{
              account:'',
              password:'',
              channel:'',
              sign:'',
              unsubscribe:''
          },
          rongcloud:{
              app_key:'',
              app_secret:'',
          },
          tianyiwuxian:{
              username:'',
              password:'',
              gwid:'',
          },
          twilio:{
              account_sid:'',
              from:'',
              token:'',
          },
          qcloud:{
              sdk_app_id:'',
              app_key:'',
              sign_name:'',
          },
          avatardata:{
              app_key:''
          },
          huawei:{
            endpoint:'',
            app_key:'',
            app_secret:'',
            from_default:'',
            callback:''
          },
          yunxin:{
              app_key:'',
              app_secret:'',
              code_length:'',
              need_up:'',
          },
      },
      form: {
        open: true,
        mode: "stmp",
        abbr: null
      },
      
    };
  },
  methods: {
    smsTabIndex(tab) {
        this.index = tab.index
        this.linkText = `${tab.label} 申请地址`;
    },
    all_Submit(){
        console.log(this.smsForm)
    },
    getlink(){
        let index=  Number(this.index);
        window.open(this.link[index])
    },
    onSubmit() {}
  }
};
</script>

<style scoped>
.links {
  margin-bottom: 20px 0;
}
</style>
